<template>
	<view>
		<view class="pagination">
			<!-- 上 -->
			<button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">
				上一页
			</button>
			<button v-if="startNumAndEndNum.start > 1" @click="$emit('getPageNo', 1)" :class="{ active: pageNo == 1 }">
				1
			</button>
			<button v-if="startNumAndEndNum.start > 2">···</button>
			<!-- 中间部分 -->
			<button v-for="(page, index) in startNumAndEndNum.showArray" :key="index" @click="$emit('getPageNo', page)"
				:class="{ active: pageNo == page }">
				{{ page }}
			</button>

			<!-- 下 -->
			<button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
			<button v-if="startNumAndEndNum.end < totalPage" @click="$emit('getPageNo', totalPage)"
				:class="{active:pageNo==totalPage}">
				{{ totalPage }}
			</button>
			<button :disabled="pageNo == totalPage" @click="$emit('getPageNo', pageNo + 1)">
				下一页
			</button>
			<button style="margin-left: 30px">共 {{ total }} 条</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Pagination",
		props: ["pageNo", "pageSize", "total", "continues"], // total总条数 pageSIze一页放多少条
		computed: {
			//总共多少页
			totalPage() {
				//向上取证
				return Math.ceil(this.total / this.pageSize);
			},
			//计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5]
			startNumAndEndNum() {
				const {
					continues,
					pageNo,
					totalPage
				} = this;
				//先定义两个变量存储起始数字与结束数字
				let start = 0,
					end = 0;
				//连续页码数字5【就是至少五页】，如果出现不正常的现象【就是不够五页】
				//不正常现象【总页数没有连续页码多】
				if (continues > totalPage) {
					start = 1;
					end = totalPage;
					let showArray = Array.from({
						length: totalPage
					}, (v, i) => start + i)
					return {
						start,
						end,
						showArray
					};
				} else {
					//正常现象【连续页码5，但是你的总页数一定是大于5的】
					//起始数字
					start = pageNo - parseInt(continues / 2);
					//结束数字
					end = pageNo + parseInt(continues / 2);
					//把出现不正常的现象【start数字出现0|负数】纠正
					if (start < 1) {
						start = 1;
						end = continues;
					}
					//把出现不正常的现象[end数字大于总页码]纠正
					if (end > totalPage) {
						end = totalPage;
						start = totalPage - continues + 1;
					}
					let showArray = Array.from({
						length: end
					}, (v, i) => start + i)
					for (let i = 0; i < showArray.length; i++) {
						if (showArray[i] > end) {
							showArray.splice(i - showArray.length) //修改页码不正常
						}
					}
					return {
						start,
						end,
						showArray
					};
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pagination {
		text-align: center;

		button {
			margin: 0 5px;
			background-color: #f4f4f5;
			color: #606266;
			outline: none;
			border-radius: 2px;
			padding: 0 3.67rpx;
			vertical-align: top;
			display: inline-block;
			font-size: 18.35rpx;
			min-width: 128.44rpx;
			height: 27.52rpx;
			line-height: 27.52rpx;
			cursor: pointer;
			box-sizing: border-box;
			text-align: center;
			border: 0;

			&[disabled] {
				color: #c0c4cc;
				cursor: not-allowed;
			}

			&.active {
				cursor: not-allowed;
				background-color: #409eff;
				color: #fff;
			}
		}
	}

	.active {
		background: skyblue;
	}
</style>